<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>deliver</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/css/main.css"/>
  <script src="/layui/layui.js"></script>
  <script src="/js/jquery.1.8.3.min.js"></script>

</head>
<body>

<div th:include="/common/courierHead :: head"></div>

<div  class="content" style="padding: 10px">



    <div class="demoTable">
        搜索ID：
        <div class="layui-inline">
            <label><input class="layui-input" name="id" id="demoReload" autocomplete="off"  placeholder="输入id"></label>
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>

    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>


    <script src="layui/layui.all.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script type="text/javascript" >
        layui.use('table', function(){
            var table = layui.table;


            //方法级渲染
            table.render({
                elem: '#LAY_table_user'
                ,url: 'findAllAPackage'
                ,cols: [
                    [
                    {checkbox: true, fixed: true}
                    ,{field:'id', title: 'ID', sort: true, fixed: true}
                    ,{field:'sendName', title: '寄件人'}
                    ,{field:'sendAddress', title: '寄件人地址', sort: true}
                    ,{field:'sendPhone', title: '寄件人电话'}
                    ,{field:'receiptName', title: '收件人'}
                    ,{field:'receiptAddress', title: '收件人地址'}
                    ,{field:'receiptPhone', title: '收件人电话'}
                    ,{field:'description', title: '描述/订单状态', sort: true}
                    ,{field:'state', title: '状态', sort: true}
                    ,{field:'right', title: '操作', align:'center', toolbar:'#barDemo', width:298}
                    ]
                ]
                ,id: 'testReload'
                ,page: true
                ,height: 480
            });

            var $ = layui.$, active = {
                reload: function(){

                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }

                    }, 'data');
                    layer.msg('ID：'+demoReload.val()+' 的查看操作');

                }
            };
                //监听工具条
                table.on('tool(user)', function(obj){
                    var data = obj.data;
                    if(obj.event === 'detail'){
                        layer.msg('ID：'+ data.id + ' 的查看操作');
                    } else if(obj.event === 'del'){
                        layer.confirm('真的删除行么', function(index){
                            obj.del();
                            layer.close(index);
                        });
                    } else if(obj.event === 'edit'){
                        layer.alert('编辑行：<br>'+ JSON.stringify(data))
                    }
                });
            $('.content .demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">确认揽件</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">揽件失败</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    </script>
    <script>
        // layui.use('table', function(){
        //     var table = layui.table;
        //     //监听表格复选框选择
        //     table.on('checkbox(demo)', function(obj){
        //         console.log(obj)
        //     });
        //     //监听工具条
        //     table.on('tool(demo)', function(obj){
        //         var data = obj.data;
        //         if(obj.event === 'detail'){
        //             layer.msg('ID：'+ data.id + ' 的查看操作');
        //         } else if(obj.event === 'del'){
        //             layer.confirm('真的删除行么', function(index){
        //                 obj.del();
        //                 layer.close(index);
        //             });
        //         } else if(obj.event === 'edit'){
        //             layer.alert('编辑行：<br>'+ JSON.stringify(data))
        //         }
        //     });
        //     $('.demoTable .layui-btn').on('click', function(){
        //         var type = $(this).data('type');
        //         active[type] ? active[type].call(this) : '';
        //     });
        //
        // });

    </script>




</div>

<div th:include="/common/footer :: footer"></div>

</div>

 
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>
</body>
</html>